﻿@using Kwd.Summary.Extensions
@using Kwd.Summary.Services

@model Kwd.Summary.ViewModels.SummaryPartEditViewModel

@{
  Script.Require("JQuery");
  //todo: how can i use per-strategy shapes, rather than just adding them in this template.
}

@using (this.Script.Foot())
{ 
<script type="text/javascript">
  $(function () {
    $("p.summary-strategy").hide();

    $('select.summary-strategy').change(function () {
      var panelClass = $(this).children("option:selected").data("details-class");
      $("p.summary-strategy.selected").slideUp()
            .promise().done(function () {
              $(this).removeClass("selected");
              $("p.summary-strategy." + panelClass)
                .addClass("selected")
                .slideDown();
            });
    });

    var panelClass = $("select.summary-strategy option:selected").data("details-class");
    $("p.summary-strategy." + panelClass)
      .addClass("selected")
      .slideDown();
  });
</script>  
}

<fieldset>
  <legend>Summary view</legend>
  <label>Select Summary type
    <select name="@Html.FieldNameFor(m => m.StrategyName)" class="summary-strategy">
      @foreach(var item in Model.StrategyOptions){
        <option value="@item.Value" @Html.If(item.Selected, "selected=\"selected\"") data-details-class="@item.Value">@item.Text</option>
      }
    </select>
  </label>
  
  <p class="summary-strategy @typeof(DefaultSummary).Name">
    Default summary uses the first 200 characters from body text.
  </p>

  <p class="summary-strategy @typeof(FirstParagraphSummary).Name">
    First paragraph summary reads the first &lt;p&gt; element from body and displays it.
  </p>

  <p class="summary-strategy @typeof(ExplicitSummary).Name">
  Custom summary uses the following body html for summary display.
    <label>Summary (@Model.Flavor)
    <textarea name="@Html.FieldNameFor(m => m.Text)" class="@Model.Flavor tinymce">@Model.Text</textarea>
  </label>
</p>
</fieldset>